 
html,body{height: 100vh;width: 100vw;overflow: hidden; 
    box-sizing: border-box;} 
    button{
      border: 0;
      
      background-color: transparent;
       
      outline: none;
  
    }
@size:10.805vh; 
 
 .mt-40{
   margin-top: (40/@size);
 }
 .mt-5{
  margin-top: (5/@size);
}
 .mb-23{
   margin-bottom: (23/@size);
 }
.left_xzzc {
    // font-size: .9rem;
    font-size:(18/@size);
    font-family: Source Han Sans SC;
    font-weight: 400; 
    color: #ffffff;
    width: 24.25rem;
    height: (40/@size);
    background: url("/image/num_xc/left_xz_pay.png") no-repeat;
    background-size: 100% 100%;
}
.container{
    height: 100vh;width: 100vw; 
    // height: 100%;
    background: url("/image/num_xc/containerbg.png") no-repeat top center; 
    background-size: 100% 100%;
    .top {
        // height: 4.4271vw;
        // height: 4.25rem;
        height: (85/@size);
        // position: relative;
        background: url("/image/num_xc/topbg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
        line-height:  4.4271vw;
        // font-size: 1.6rem;
        font-size: (32/@size);

        font-family: Source Han Sans SC;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 0px 0px 12px #009eff;
      }

      .box {
        // padding: 1.0417vw 1.0417vw  0; 
        padding: (20/@size) 1.0417vw  0;
        display: flex;
        overflow: hidden;
        box-sizing: border-box;
        // padding: 2rem; 
        .box_left { 
            overflow: hidden;
            box-sizing: border-box;
            // padding: 2rem 1.75rem 0;
            padding: (40/@size) 1.75rem 0;

            width: 28.9063vw;
            // margin-right: 1rem;
        //   height: 88.4vh;
        // height: 49.75rem;
            height: (955/@size);
        
        // height: 995;
        //   height: calc(955/1080vh);
        //   padding-top: 4rem;
          // position: relative;
          background: url("/image/num_xc/left.png") no-repeat;
          background-size: 100% 100%;
          .xzzc_top_e{
              margin-top: 1.5rem;
             height: (323/@size);
            //  width: 100%;
            //  border: 1px solid red;

          }
          .xzzc_bottom_e{
            // margin-top: 3.2rem;
            height: (323/@size);
           //  width: 100%;
            // border: 1px solid red;
            .staijianc_noactive { 
              // box-sizing: border-box; 
              width: 3.15rem;
              height:(71/@size);
              background: url("/image/num_xc/leftshengt.png") no-repeat;
              background-size: 100% 100%;
              // font-size: .7rem;
              font-size: (14/@size);
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #a5b6d3;
            }
            .staijianc_active{
              background: url("/image/num_xc/tianqi_active.png") no-repeat;
              background-size: 100% 100%;
            }
            .shuiq{
              height: (275/@size);
             
              // border: 1px solid red;
  
            }
          }

        
           
        }
        .box_center{
          overflow: hidden;
          box-sizing: border-box;

            // 宽度可以使用rem但是高度的话rem没适配的 
            width:38.0208vw;
            height: (955/@size); 
        
            .box_center_top {
                overflow: hidden;
                box-sizing: border-box;
              width: 36.5rem;
              height: (578/@size); 
              background: url("/image/num_xc/center_top.png") no-repeat;
              background-size: 100% 100%;
              padding:(20/@size) 1rem;
              .box_center_top_box{
                  // width: 34.5rem;
                  // height: 16.6rem;
                  height: (332/@size);
                  // border: 1px solid red;
                  .box_center_top_left {
                    // width: 5.45rem;
                    // height: (67/@size);
                    width: 5.4rem;
                    height: (64/@size);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: url("/image/num_xc/bigbsyq.png") no-repeat;
                    background-size: 100% 100%;
                   
                    .num{
                      // font-size: .9rem;
                      font-size:(18/@size);

                      // font-family: Source Han Sans SC;
                      font-weight: 400;
                      color: #FFFFFF;
                    }
                    .title{
                      // font-size: .7rem;
                      font-size: (14/@size);

                      font-family: Source Han Sans SC;
                      font-weight: 400;
                      color: #A5B6D3;
                    }
                  }
              }
              .maps{
                width: 23.1771vw;
                height: (314/@size);
                // border: 1px solid red;
              }
            }

            .box_center_center{
              box-sizing: border-box;
                width: 36.5rem; 
                height: (281/@size); 
                color: #ffffff; 
                // padding: 1.5rem 2.5rem 1.3rem 2.5rem;
                padding: (30/@size) 2.5rem (26/@size) 2.5rem;

                background: url("/image/num_xc/center_bottom.png") no-repeat;
                background-size: 100% 100%;
              .boix-zhi{
                width: 31.4rem;
                height: (38/@size); 
                // font-size: .9rem;
                font-size: (18/@size);
                font-family: Source Han Sans SC;
                font-weight: 400; 
                color: #ffffff;
              
                background: url("/image/num_xc/left_xz_pay.png") no-repeat;
                background-size: 100% 100%;
              }
              .boix-tab{
                width: 31.4rem;  
                // font-size: .7rem;
                font-size: (14/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                .h-38{
                    height: (38/@size);
                }
               .boix-tab_active{
                 background-color: #042358;
                
               }
                
              }
             
            
                 .box_center_center_box{
                    // width: 31.4rem;
                    // height: (214/@size); 
                    .bsyq {
                      width: 4.9rem;  
                      .bsyq_item {
                        width: 4.9rem;
                        height: (36/@size);
                        // font-size: .8rem;
                        font-size: (16/@size);

                        font-family: Source Han Sans SC;
                        font-weight: 400;
                        color: #ffffff;
                        background: url("/image/num_xc/bsyq.png") no-repeat;
                        background-size: 100% 100%;
                      }
                      .bsyq_item_active {
                        background: url("/image/num_xc/bsyq1.png") no-repeat;
                        background-size: 100% 100%;
                        color: #ffffff; 
                      }
                      // {
                      //   text-shadow: '0 0 18px #6dc8e7, 0 0 16px #6dc8e7, 0 0 11px #6dc8e7, 0 0 3px #6dc8e7'
                      // }

                    }
                  }
                  .bsyq_right {
                    overflow: hidden;
                    box-sizing: border-box;
                    width: 5.2rem; 
                    height:(82/@size);
                    background: url("/image/num_xc/quezhenbg.png") no-repeat;
                    background-size: 100% 100%;
                    .bsyq_right_title {
                      // font-size: .7rem;
                      font-size: (14/@size);

                      font-family: Source Han Sans SC;
                      font-weight: 400;
                      color: #a5b6d3;
                    }
                    .bsyq_right_num {
                      // font-size: 1.2rem;
                      font-size:(24/@size);

                      font-family: Roboto;
                      font-weight: 500;
                    }
                  }
            }
            
            .box_center_bottom_item { 
                width: 28.45rem;
                height: (46/@size);
                margin-top: (30/@size);
                .bottom_item_bg {
                  // width: 6.9rem; 
                  margin-right: 4.25rem;
                // border: 1px  solid #ffffff;
                  width: 7.45rem;
                  height: (46/@size);
                  line-height: (36/@size);
                  text-align: center;
                  // font-size: 0.8rem; 
                  font-size: (16/@size); 


                //   margin-right: 3.75rem;
                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #a5b6d3;
                  background: url("/image/num_xc/center_bottom (1).png") no-repeat;
                  background-size: 100% 100%;
                  color: #a5b6d3;
                }
                .box_center_bottom_item_active {
                  background: url("/image/num_xc/center_bottom1.png") no-repeat;
                  background-size: 100% 100%;
                  color: #ffffff;
                }
              }
        }
        .box_right{
          // margin-left: 1rem;

          overflow: hidden;
          box-sizing: border-box;
            // width: 28.9063vw;
            height: (955/@size);
            // padding: 2rem 1.75rem 0; 
            padding: (40/@size) 1.75rem 0; 

            background: url("/image/num_xc/left.png") no-repeat;
          background-size: 100% 100%;
            .box_right_tab{ 
              .jksb{
                padding-top: (14/@size);
                width: 5.4rem;
                height: (64/@size);
                background: url("/image/num_xc/bigbsyq.png") no-repeat;
                background-size: 100% 100%;
                // font-size: .8rem;
                font-size: (16/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #a5b6d3;
             }
             .bsyq_item_active {
              background: url("/image/num_xc/bigbsyq1.png") no-repeat;
              background-size: 100% 100%;
              color: #ffffff;
            }
             
            }
            .box_right_top{
                // width: 11rem;
                // border: 1px solid red;
                height: (247/@size);
                .box_right_top_quan{
                 
                    width: 100%;
                    height: (212/@size);
                    // background: linear-gradient(0deg, #1890FF 0%, #1AFFE4 100%);
                    // border-radius: 50%;
                }
                .box_right_top_list_active{
                  color: #f9d354;

                  // width: .2rem;
                  // height: (30/@size);
                  border-right:4px solid  #1890FF; 
                   
                  border-radius: 2px;
                }
                .box_right_top_list{
                    width: 11rem;
                    // border: 1px solid red; 
                    height: (247/@size);
                    color: #A5B6D3; 
                    // border-right: 2px solid red;
                    // background: #1890FF;
                    background: #042254;
                    // padding-top: 1rem;
                    padding-top: (20/@size);

                    padding-left: .85rem; 
                    border-radius: .3rem;
                    padding-right: .2rem;
                  
                    .border_id{
                      width: 1rem;
                      height: (20/@size);
                      background: #031439;
                      // font-size: .7rem;
                      font-size: (14/@size);

                      font-family: Source Han Sans SC;
                      font-weight: 400;
                    
                      border-radius: 50%;
                    }
                    .yjtitle{
                      // font-size: .7rem;
                      font-size: (14/@size);

                      font-family: Source Han Sans SC;
                      font-weight: 400;
                      // color: #A5B6D3;
                    }
                    .yjicon{
                      width: 16px;
                      height: 18px;
                      background: url("/image/num_xc/yousanj.png") no-repeat;
                      background-size: 100% 100%;
                    }
                    .border_num{
                      // font-size: .8rem;
                      font-size: (16/@size);

                      font-family: Roboto;
                      font-weight: 500; 
                      margin-right: .55rem;
                    }
                }
              }
            .zhyj{
              box-sizing: border-box;
              overflow: hidden;
          

              .left-xzzc_left{ 
                width: 10.6rem;
                // width: 10.6rem;
               box-sizing: border-box;
                height: (212/@size); 
                  
                box-sizing: border-box;
                margin-top: 50%;
                margin-top: (66/@size);
                // border: 1px solid red;
                // margin-right: 1.5rem;
                // padding: (20/@size) .5rem;
              
              }
              .left-xzzc_list{
                // overflow: scroll; 
                // overflow-x: scroll;
                overflow-y: hidden;
                width: 12.4rem;
                height: (325/@size);
                background: #04255D; 
                border-radius: 6px;
                padding: (20/@size) (18/@size) 0;
                .title{
                  // font-size: .7rem;
                  font-size: (14/@size);

                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #A5B6D3;
                }
                .value{
                 
                  // font-size: .7rem;
                  font-size: (14/@size);

                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #A5B6D3;

                }
                .value-active{
                

                  // font-size: .7rem;
                  font-size: (14/@size);

                  font-family: Source Han Sans SC;
                  font-weight: 400;
                  color: #F9D354;
                }
              }
            }
            .select_box {
              width: 5rem;
              height: (30/@size); 
              background: rgba(3, 20, 57, 0);
              border: 0.1rem solid #00ceff;
              // padding-left: .4rem; 
              .select_box_left{
                width:.35rem;
                height: (7/@size);
                margin-right: .4rem;
                margin-left: .4rem;
                background: url('/image/num_xc/right_quan.png') no-repeat;
                background-size: 100% 100%;
              }
              .select_box_title{
                // font-size: .7rem;
                font-size: (14/@size);

                font-family: Source Han Sans SC;
                font-weight: 400;
                color: #00CEFF
              }
              .select_box_right{
                width: 1.55rem;
                height: (29/@size); 
                margin-left: .95rem;
                background: url('/image/num_xc/right_select.png') no-repeat;
                background-size: 100% 100%;
              }
            } 
            .jb_line {
              height: (30/@size); 
               width: 18.75rem;
              border: 0.1rem solid;
              .jb_line_item {
                 width: 18.75rem;
                // height: .05rem;
                height: (1/@size);
                background: linear-gradient(
                  90deg,
                  rgba(0, 206, 255, 0.1) 0%,
                  #00ceff 52%,
                  rgba(0, 206, 255, 0.1) 100%
                );
                border-radius: 0.05rem;
              }
            }

            
          .bsyq_right {
            width: 5.2rem;
            // box-sizing: border-box;
            overflow: hidden;
            height:(70/@size);
            background: url("/image/num_xc/quezhenbg.png") no-repeat;
            background-size: 100% 100%;
            .bsyq_right_title {
              font-size: .7rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #a5b6d3;
            }
            .bsyq_right_num {
              // font-size: 1.2rem;
              font-size: (24/@size);

              font-family: Roboto;
              font-weight: 500;
            }
          }
          .ggecharts{
            width: 100%;
            
            height: (234/@size);
            // border: 1px solid red;
          }
         }
      }
}
